<div id="app">
    <div class="box">
      <div class="contain">
        <div class="nav">
          <router-link class="nav-link" to="/" tag="div">login</router-link>
          <router-link class="nav-link" to="/home" tag="div">home</router-link>
          <router-link class="nav-link" to="/user" tag="div">user</router-link>
        </div>
        <div class="main">
          <transition :name="transitionName">
            <router-view class="child-view"></router-view>
          </transition>
        </div>
      </div>
    </div>
  </div>

  <style>
    .box {
  width: 375px;
  height: 667px;
  border: 1px solid #222;
  margin: 0 auto;
  border-radius: 16px;
}

.contain {
  width: 340px;
  height: 600px;
  border: 1px solid #222;
  margin: 20px auto 0 auto;
  display: flex;
  flex-direction: column;
}

.nav {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
}

.nav .nav-link {
  line-height: 40px;
  border: 1px solid #222;
  flex-grow: 1;
  text-align: center;
  cursor: pointer;
}
.nav .nav-link.router-link-exact-active{
  background-color:#ccc;
}
.main {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}
.login,.home,.user{
  width:100%;
  height:100%;
  position:absolute;
}
.login{
  background-color:red;
}
.home{
  background-color:green;
}
.user{
  background-color:pink;
}


/*路由切换动画*/
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script type=text/javascript>
    const Home = {
        template: '<div class="home">Home</div>'
    };
    const User = {
        template: '<div class="user">User</div>'
    };
    const Login = {
        template: '<div class="login">Login</div>'
    };

    const router = new VueRouter({
        routes: [{
            name: 'login',
            path: '/',
            meta: {
                index: 0,
            },
            component: Login
        }, {
            name: 'home',
            path: '/home',
            meta: {
                index: 1,
            },
            component: Home
        }, {
            name: 'user',
            path: '/user',
            meta: {
                index: 2,
            },
            component: User
        }]
    });
    new Vue({
  el: '#app',
  data: {
    transitionName: ''
  },
  watch: {
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之
      if (to.meta.index > from.meta.index) {
        this.transitionName = 'slide-left';
      } else {
        this.transitionName = 'slide-right';
      }
    }
  },
  router
})

</script>
